<template>
	<view class="box" v-if="dataVal.length != 0">
		<view class="left">首页</view>
		<scroll-view class="scroll nav" scroll-x>
			<block v-for="(item,index) in dataVal" :key="item.id">
				<view class="scroll-item" @click="tabSelect(item.id)">{{item.name}}</view>
			</block>
		</scroll-view>
		<view class="right" @tap="navto">全部</view>
	</view>
</template>

<script>
	export default {
    props: {
      dataVal: {
        type: Array,
        default(){
          return []
        }
      }
    },
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
			};
		},
		methods: {
			tabSelect(id) {
				uni.navigateTo({
					url: '/pages/goods/goodslist/goods-search?cid='+id
				})
			},
			navto(){
				uni.switchTab({
					url:'/pages/tabbar/classify'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 32rpx;
		color: #FFFFFF;
		display: flex;
		.left{
			width: 90rpx;
			min-width: 70rpx;
			height: 80rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
			background-image: url('/static/cur.png');
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 42rpx 14rpx;
		}
		.scroll{
			width: calc(100% - 90rpx - 120rpx);
			flex: 1;
			display: flex;
			padding-right: 20rpx;
			.scroll-item{
				display: inline-block;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
		}
		.right{
			width: 120rpx;
			min-width: 120rpx;
			background-image: url('/static/all.png');
			background-repeat: no-repeat;
			background-size: 38rpx 38rpx;
			background-position: left center;
			padding-left: 48rpx;
		}
	}
</style>
